<template>

    <div>
        <el-button type="primary">主要按钮</el-button>
        <div class="searchInfo">
            <el-input v-model="search" placeholder="输入关键字搜索" />
            <el-button type="primary" @Click="search">搜索</el-button>
        </div>
        <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column label="title" prop="title">
            </el-table-column>
            <el-table-column label="content" prop="content">
            </el-table-column>
            <el-table-column label="username" prop="username">
            </el-table-column>
            <el-table-column label="createdAt" prop="createdAt">
            </el-table-column>
            <el-table-column align="right">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>


<script>
export default {
    data() {
        return {
            tableData: [],
            search: ''
        }
    },
    mounted() {
        this.$axios.get('http://127.0.0.1:10032/articles/getArticlesInfoByUsername?username=houziwang')
            .then(response => {
                console.log("response", response.data)
                this.tableData = response.data.resultValue
            })
            .catch(error => {
                console.error(error)
            })
    },
    methods: {
        search() {

        },
        handleEdit(index, row) {
            console.log("handleEdit", index)
            console.log("handleEdit", row.id)

            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }



}
</script>

<style>


.searchInfo {
    margin: 10px;
    .el-button{
        float: left; 
    }
    .el-input {
        margin-right: 10px;
        float: right; 
        width: 300px
    }

}
</style>